<template>
  <div class="com-header">
    <div class="nav1">
      <div class="options">
        <div class="logo">
          <img src="@/assets/logo.png" alt="" />
        </div>
        <div class="nav">
          <ul>
            <li
              v-for="(item, index) in nav1List"
              :key="index"
              @click="nav1Change(index, item.path)"
              :class="{ 'nav-active': ($route.path.includes(item.path) && item.path!='/') || (item.path=='/' && $route.name=='首页')}"
              @mouseenter="nav1Enter(index)"
            >
              {{ item.name }}
            </li>
            <div class="holder" @mouseenter="nav2Index = ''"></div>
          </ul>
        </div>

        <div class="search" @mouseenter="nav2Index = ''" :style="{width:pageW>=1920?'18%':'28%',marginLeft:pageW>=1920?'5rem':pageW>=1300 && pageW<1920?'3rem':''}">
          <span @click="visible = !visible">公众号 / 优品商城</span>
          <!-- <i class="el-icon-search" @click="isSearch = !isSearch"></i> -->
          <div class="scan" v-show="visible" @mouseleave="visible = false">
            <div class="scan-l">
              <ul>
                  <li :class="{ active: ewmIndex == 2 }" @click="changeEwm(2)">
                  公众号
                </li>
                <li :class="{ active: ewmIndex == 1 }" @click="changeEwm(1)">
                  优品商城
                </li>
              
              </ul>
            </div>
            <div class="scan-r">
              <img v-if="ewmIndex == 1" src="@/assets/xcx.jpg" alt="" />
              <img v-else src="@/assets/fwh.jpg" alt="" />
              <p>使用微信扫一扫</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- //二级导航 -->
    <div
      class="nav2"
      @mouseleave="nav2Index = ''"
      v-if="this.nav2Index && this.nav2Index != 0"
    >
      <ul>
        <li
          v-for="(item, index) in nav2"
          :key="index"
          :class="{ active: $route.path == item.path }"
          @click="$router.push(item.path)"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!-- 搜索框 -->
    <div class="search-box" v-if="isSearch">
      <el-input
        placeholder="请输入关键字"
        v-model="searchKey"
        style="width: 700px; height: 56px"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </el-input>
    </div>
  </div>
</template>
<script >
export default {
  data() {
    return {
      pageW: 1920,
      isSearch: false, //是否显示搜索
      searchKey: "", //搜索内容
      visible: false, //是否显示商城和公众号二维码
      ewmIndex: 2,
      nav2Index: "",
      nav1List: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "协会动态",
          path: "/dynamic",
        },
        {
          name: "协会服务",
          path: "/service",
        },
        {
          name: "入会指南",
          path: "/guide",
        },
        {
          name: "关于我们",
          path: "/about",
        },
      ],
      nav2: [],
    };
  },
  mounted() {
    this.pageW = window.screen.width;
  },
  methods: {
    //主导航点选
    nav1Change(index, path) {
      this.$router.push(path);
      this.nav2Index = "";
    },
    //主导航鼠标移入
    nav1Enter(index) {
      switch (index) {
        case 0:
          break;
        case 1:
          this.nav2 = [
            {
              name: "协会党建",
              path: "/dynamic/construction",
            },
            {
              name: "协会资讯",
              path: "/dynamic/news",
            },
            {
              name: "分会资讯",
              path: "/dynamic/branch",
            },
            {
              name: "会员资讯",
              path: "/dynamic/vip",
            },
            {
              name: "协会活动",
              path: "/dynamic/activity",
            },
            {
              name: "项目直播",
              path: "/dynamic/live",
            },
          ];
          break;
        case 2:
          this.nav2 = [
            {
              name: "投融服务",
              path: "/service/invest",
            },
            {
              name: "赋能服务",
              path: "/service/energize",
            },
            {
              name: "招商推介",
              path: "/service/attract",
            },
          ];
          break;
        case 3:
          this.nav2 = [
            {
              name: "入会介绍",
              path: "/guide/introduce",
            },
            {
              name: "会员名录",
              path: "/guide/vip",
            },
            {
              name: "分会布局",
              path: "/guide/branch",
            },
          ];
          break;
        case 4:
          this.nav2 = [
            {
              name: "协会介绍",
              path: "/about/introduce",
            },
            {
              name: "组织架构",
              path: "/about/organization",
            },
            {
              name: "协会章程",
              path: "/about/regulations",
            },
            {
              name: "联系我们",
              path: "/about/contact",
            },
          ];
          break;
      }
      this.nav2Index = index;
    },
    //（商城/公众号）扫码
    changeEwm(index) {
      this.ewmIndex = index;
    },
    // search() {
    //   if(!this.searchKey){
    //     this.$message.error('请输入关键字')
    //     return
    //   }else{
    //     console.log(this.$route.path);
    //   }
    // },
  },
};
</script>
<style lang="less">
.com-header {
  width: 100%;
  // background-color:red;
  min-height: 80px;
  .nav1 {
    width: 100%;
    min-height: 80px;
    display: flex;
    justify-content: center;
    .options {
      width: 75%;
      background-color: #fff;
      box-sizing: border-box;
      height: 100%;
      font-size: 1.5rem;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      .logo {
        // width:25%;
        img {
          width: 100%;
        }
        // margin-right: 3rem;
      }
      .nav {
         width: 70%;
        margin-right: 2rem;
        ul {
          width: 100%;
          display: flex;
          height: 80px;
          justify-content: center;
          align-items: center;
          li {
            margin: 0 auto;
            margin-right: 0.2rem;
            // min-width: 16%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

          }
          .nav-active {
            color: #0b4e9e;
            position: relative;
            &::after {
              content: "";
              display: block;
              width: 100%;
              background-color: #0b4e9e;
              height: 8px;
              position: absolute;
              top: 0;
            }
          }
          .holder {
            width: 10px;
            height: 100%;
            background-color: transparent;
            // background-color: red;
          }
        }
      }

      .search {
        // margin-left: 3rem;
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        width: 28%;
        i {
          margin-left: 20px;
          color: #0b4e9e;
          cursor: pointer;
          // font-weight: bold;
        }
        .scan {
          width: 320px;
          height: 256px;
          border-radius: 4px;
          overflow: hidden;
          box-shadow: 0px 4px 8px 0px rgba(5, 33, 67, 0.64);
          position: absolute;
          top: 52px;
          z-index: 100;
          left: -78px;
          display: flex;
          .scan-l {
            // font-size: 14px;
            width: 120px;
            background-color: #e8f2fd;
            ul {
              width: 100%;
              li {
                width: 100%;
                text-align: center;
                height: 40px;
                line-height: 40px;
                color: #000;
              }
            }
            .active {
              box-sizing: border-box;
              color: #0b4e9e;
              background-color: #ffffff;
              // border-left:4px solid #0b4e9e;
              position: relative;
              &::after {
                content: "";
                position: absolute;
                width: 4px;
                height: 40px;
                background-color: #0b4e9e;
                left: 0px;
                top: 0px;
              }
            }
          }
          .scan-r {
            padding: 24px 19px;
            box-sizing: border-box;
            flex: auto;
            background-color: #fff;
            img {
              width: 160px;
              height: 160px;
              margin-bottom: 16px;
            }
            p {
              font-size: 16px;
              color: #999;
              text-align: center;
            }
          }
        }
      }
    }
  }

  .nav2 {
    position: relative;
    box-shadow: 0px 4px 8px 0px rgba(5, 33, 67, 0.24);
    padding: 23px 0;
    display: flex;
    font-size: 1.3rem;
    justify-content: center;
    ul {
      width: 100%;
      display: flex;
      justify-content: center;
      li {
        cursor: pointer;
        text-align: center;
        line-height: 56px;
        width: 220px;
        height: 56px;
        background-color: #e8f2fd;
        margin-right: 20px;
        &:nth-child(1){
          margin-left: 20px;
        }
      }
      .active {
        background-color: #0b4e9e;
        color: #ffffff;
      }
    }
  }
  .search-box {
    box-shadow: 0px 4px 8px 0px rgba(5, 33, 67, 0.24);
    padding: 23px 270px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 102px;
    .el-button {
      background-color: #0b4e9e;
      width: 56px;
      height: 56px;
      border-radius: 0;
    }
    input {
      height: 56px;
    }
    .el-icon-search {
      font-size: 20px !important;
    }
  }
}
</style>